<template>
  <div class="index">
    <!-- 头部 -->
    <myHeader>
      <template #left>
        <i class="iconfont icon-fanhui"></i>
      </template>
      <template #inp>
        <input type="text" class=" icon-sousuo" placeholder="输入城市/景点/游玩主题">
      </template>
      <template #right>
        <!-- {{this.state.defaultCity}} -->
        北京
        <i class=" iconfont icon-sanjiaodown"></i>
      </template>
    </myHeader>
    <!-- 轮播图 -->
    <div class="wrapper">
      <!-- :options="swiperOption" -->
      <swiper>
        <!-- slides -->
        <swiper-slide>
          <img class="swiper-img" src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/0b26e9760c2673c63c05e1efce1275ea.jpg_750x200_495c0a72.jpg">
        </swiper-slide>
        <swiper-slide>
          <img class="swiper-img" src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/0b26e9760c2673c63c05e1efce1275ea.jpg_750x200_495c0a72.jpg">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 九宫格 -->
    <div class="jiuBox">
      <myIcon></myIcon>
    </div>
    <!-- 热销推荐 -->
    <div class="recommend">
      热销推荐
    </div>
    <!-- 卡片 -->
    <!-- <div> -->
    <myCard class="card">
      <template #card>
        <div class="card-box" v-for="(item,index) in cardList" :key="index" @click="goDetail(index)">
          <div class="card-ing">
            <img :src="item.imgs" alt="">
          </div>
          <div class="card-conent">
            <h4>{{item.title}}</h4>
            <p>{{item.content}}</p>
            <span>{{item.details}}</span>
          </div>
        </div>
      </template>
    </myCard>
    <!-- </div> -->
    <!-- 周末去哪 -->
    <myWeek></myWeek>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
import myHeader from "@/components/myHeader";
// 九宫格
import myIcon from "@/components/myIcon";
// 卡片
import myCard from "@/components/myCard";
// 周末去哪
import myWeek from "@/components/myWeek";
export default {
  components: { myHeader, myIcon, myCard, myWeek },
  data() {
    return {
      // 卡片数据
      cardList: [
        {
          imgs:
            "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
          title: "故宫",
          content: "细数北京温泉，温暖你的冬天",
          details: "查看详情"
        },
        {
          imgs:
            "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
          title: "故宫",
          content: "细数北京温泉，温暖你的冬天",
          details: "查看详情"
        },
        {
          imgs:
            "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
          title: "故宫",
          content: "细数北京温泉，温暖你的冬天",
          details: "查看详情"
        }
      ]
    };
  },
  methods: {
    goDetail(index) {
      console.log(index);
      this.$router.push("/detail");
    }
  }
  //   created() {
  //     axios.get("table.json").then(res => {
  //       console.log(res.data);
  //     });
  //   }
};
</script>

<style lang="stylus" scoped>
.index {
  background-color: #eaeaec;
}

// 热销推荐
.recommend {
  height: 1.7rem;
  line-height: 3rem;
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

// 卡片
.card {
  width: 100%;
  height: 350px;
  background-color: white;

  .card-box {
    display: flex;

    .card-ing {
      width: 35%;

      img {
        width: 100%;
        height: 4rem;
        border-radius: 0.2rem;
      }
    }

    .card-conent {
      padding-left: 0.5rem;

      p {
        color: #34352f;
        margin: 0.2rem 0;
        font-size: 0.6rem;
      }

      span {
        background-color: #fd9000;
        color: white;
        display: inline-block;
        font-size: 10px;
        padding: 0.3rem;
        margin-top: 0.2rem;
        border-radius: 0.2rem;
      }
    }
  }
}

// 轮播图
.wrapper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 26.7%;

  img {
    width: 100%;
  }
}
</style>
